<template>
  <div class="first" :class="{current:iscurrent==0}">
    <div class="logo"></div>
    <div class="text">
      <img src="../images/text_1.png" alt />
      <img src="../images/text_2.png" alt />
      <img src="../images/text_3.png" alt />
      <img src="../images/text_4.png" alt />
      <img src="../images/text_5.png" alt />
      <img src="../images/text_6.png" alt />
      <img src="../images/text_7.png" alt />
      <img src="../images/text_8.png" alt />
    </div>
    <div class="info"></div>
  </div>
</template>

<script>
export default {
  name: "Section1",
  data() {
    return {
        
    }
  },
  props:['iscurrent'],
  created(){
    
  }
};
</script>

<style scoped>
.first .logo {
    background: url("../images/logo.png") no-repeat;
    width: 251px; 
    height: 186px;
    margin: 40px auto 0;
}
.first .text {
    width: 100%;
    text-align: center;
    margin-top: 80px;
}
.first .text > img{
    margin: 0 40px;
    opacity: 0.4;
    transition: margin 1s,opacity 1s;
}
.first.current .text> img {
    margin: 0 4px;
    opacity: 1;
}
.first .info{
    background: url("../images/info_1.png") no-repeat;
    width: 772px;
    height: 49px;
    margin: 50px auto;
}
</style>